﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Course.aspx.cs" Inherits="MiaoWeiProject.liuyong.Course" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>课程</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            font-size: 14px;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }
        /*头部样式*/
        #heard {
            width: 100%;
            height: 70px;
            background: url('/images/nav-bg.png') repeat-x left top;
            display: flex;
        }

        #heard_conet {
            height: 50px;
            margin: 10px auto;
            width: 75%;
            display: flex;
            justify-content: space-between;
        }

        #conter_left {
            width: 275px;
            height: 50px;
            background: url('/images/nav-logo-2019-0826.png') no-repeat left center;
        }

        #conter_zhong {
            width: 60%;
            height: 50px;
        }

            #conter_zhong ul {
                display: flex;
                justify-content: space-between;
                overflow: hidden;
            }

                #conter_zhong ul li {
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                }

                    #conter_zhong ul li a {
                        padding: 7px 27px;
                        color: #666;
                        font-size: 1.2em;
                        border-radius: 18px;
                    }

                    #conter_zhong ul li i.nav-new {
                        display: inline-block;
                        width: 39px;
                        height: 20px;
                        background: url('/images/nav-new.png') no-repeat left top;
                        vertical-align: middle;
                        margin-left: 4px;
                    }
        /*悬浮导航样式*/
        /*#conter_zhong ul li a:*/ .hover {
            color: #f70;
            background-color: #e0dce4;
            box-shadow: 2px 2px 1px #c5c0cc inset;
        }

        #conter_right {
            width: 8%;
            height: 50px;
        }

            #conter_right ul {
                height: 50px;
                line-height: 50px;
                display: flex;
                justify-content: space-between;
                overflow: hidden;
            }

                #conter_right ul li {
                    text-align: center;
                }

                    #conter_right ul li a {
                        font-size: 1.1em;
                        color: #666;
                    }

                        #conter_right ul li a:hover {
                            color: #f70;
                        }
        /*点击导航样式*/
        .yangshi {
            color: #fff;
            background-color: #e75c77;
            box-shadow: 2px 2px 1px #c42f4c inset;
        }
        /*最新开班信息*/
        #kaiban {
            width: 100%;
            height: 670px;
            background: url("lyimages/main-bg-repeat.jpg") repeat-x left bottom;
        }

        #kaiban_box {
            width: 100%;
            height: 100%;
            background: url("lyimages/main-bg.jpg") no-repeat center bottom;
            overflow: hidden;
            position: relative;
        }

        .light {
            width: 1367px;
            height: 355px;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -683px;
            background: url("lyimages/light.png");
            opacity: 0;
        }

        .ufo {
            width: 432px;
            height: 231px;
            position: absolute;
            top: -230px;
            left: 50%;
            margin-left: -216px;
            background: url("lyimages/ufo.png");
        }

        .main {
            width: 75%;
            margin: 0 auto;
            position: relative;
            z-index: 1;
            height: 100%;
        }
        /*最新开班信息的左边*/
        .main-left {
            position: absolute;
            width: 427px;
            height: 360px;
            background: url("lyimages/machine-left-tall.png");
            left: -223px;
            bottom: 38px;
            z-index: 1;
        }

        .main-left-one {
            width: 72px;
            height: 52px;
            background: url("lyimages/left-little-fire.png");
            position: absolute;
            right: 117px;
            top: 46px;
            /*opacity: 0;*/
        }

        .main-left-two {
            width: 184px;
            height: 46px;
            background: url("lyimages/left-fire.png") no-repeat left center;
            position: absolute;
            right: -16px;
            top: 54px;
            transform: rotate(-23deg);
            transform-origin: left center;
        }
        /*最新开班信息右边*/
        .main-right {
            position: absolute;
            width: 512px;
            height: 0;
            height: 277px;
            overflow: hidden;
            right: -238px;
            bottom: 22px;
            z-index: 1;
            padding-top: 200px;
        }

        .main-right-one {
            position: absolute;
            width: 166px;
            height: 69px;
            background: url("lyimages/machine-right-arm.png");
            right: 110px;
            top: 205px;
            transform-origin: 185px center;
        }

        .main-right-one-one {
            width: 53px;
            height: 45px;
            background: url("lyimages/right-little-fire.png");
            position: absolute;
            left: -36px;
            top: 11px;
        }

        .main-right-one-two {
            width: 184px;
            height: 46px;
            background: url("lyimages/right-fire.png") no-repeat right center;
            position: absolute;
            left: -183px;
            top: 11px;
            transform-origin: left center;
        }

        .main-right-two {
            position: absolute;
            width: 255px;
            height: 272px;
            background: url("lyimages/machine-right-tall.png");
            right: 0;
            top: 205px;
        }
        /*最新开班信息的中间内容*/
        .main-content {
            /*padding-bottom: 78px;*/
            padding-top: 6px;
            width: 100%;
            margin: 0 auto;
            height: 664px;
            background: url("lyimages/underpan.png") no-repeat center bottom;
            position: relative;
            text-align: center;
        }

        .main-content-box {
            width: 766px;
            height: 583px;
            margin: 0 auto;
            position: relative;
        }

        .main-content-box-bottom {
            width: 100%;
            height: 100%;
            background: url("lyimages/prink-light-bottom.png") no-repeat center bottom;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        .main-content-box-top {
            width: 531px;
            height: 442px;
            padding: 96px 117px 0 118px;
            background: url("lyimages/prink-light-top.png") no-repeat center top;
            color: #000000;
            text-align: left;
        }

        .kecheng {
            width: 531px;
            height: 123px;
        }

            .kecheng a {
                color: #787575;
            }

        .kecheng-lie {
            width: 508px;
            height: 81px;
            padding: 22px 11px 20px 12px;
            background: url("lyimages/class-info-box-active.png");
            margin-bottom: -18px;
            position: relative;
        }

        .kecheng-lie-beijing {
            width: 508px;
            height: 81px;
            padding: 22px 11px 20px 12px;
            background: url("lyimages/1.png");
            margin-bottom: -18px;
            position: relative;
        }

        .kecheng-lie-pc {
            float: left;
            width: 50px;
            height: 46px;
            margin: 18px 0 0 18px;
            background: url("lyimages/class-info-pc.png") no-repeat center center;
        }

        .kecheng-lie dd {
            padding: 19px 0 0 80px;
        }

            .kecheng-lie dd h6 {
                font-size: 18px;
                line-height: 18px;
                height: 18px;
                overflow: hidden;
            }

            .kecheng-lie dd p {
                font-size: 14px;
                line-height: 14px;
                height: 14px;
                position: absolute;
                bottom: 34px;
            }

        .kecheng-lie-state {
            height: 26px;
            padding-left: 44px;
            padding-right: 23px;
            background: #fff url("lyimages/pc-icon.png") no-repeat 17px center;
            border-radius: 13px;
            line-height: 26px;
            font-size: 14px;
            position: absolute;
            right: 27px;
            bottom: 30px;
        }
        /*图标*/
        #tubiao {
            width: 100%;
            background: url("lyimages/contact-bg-repeat.jpg") repeat-x left center;
            height: 130px;
        }

        .tubiao-box {
            width: 75%;
            margin: 0 auto;
            height: 130px;
            display: flex;
            justify-content: space-between;
        }

            .tubiao-box li {
                /*float: left;*/
                /*flex:1;*/
                padding-left: 143px;
                height: 130px;
                position: relative;
                /*margin-left: 44px;*/
            }

                .tubiao-box li p {
                    cursor: pointer;
                    margin-left: 26px;
                    line-height: 72px;
                    font-size: 18px;
                    font-weight: 600;
                    color: #736a80;
                    text-shadow: 0 2px rgba(255,255,255,.4);
                    overflow: hidden;
                }

        .material {
            cursor: pointer;
            margin-left: 40px;
            background: url("lyimages/material.png") no-repeat left bottom;
        }

        .qq {
            cursor: pointer;
            background: url("lyimages/qq.png") no-repeat left bottom;
        }

        .qq-box {
            position: absolute;
            width: 67px;
            height: 94px;
            left: 62px;
            top: 2px;
        }

        .qq-body {
            position: absolute;
            width: 67px;
            height: 60px;
            background: url("lyimages/qq-body.png");
            top: 0;
            /*transform: translate3D(0,4px,0);
            transition: transform .3s;*/
        }

        .qq-mark {
            width: 67px;
            height: 40px;
            background: url("lyimages/qq-mark.png");
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .wechat {
            cursor: pointer;
            background: url("lyimages/wechat.png") no-repeat left bottom;
        }

        .wechat-pop {
            width: 150px;
            height: 200px;
            position: absolute;
            background: url("lyimages/wechat-pop2.png") no-repeat 0 0;
            left: 112px;
            bottom: 104px;
            z-index: 5;
            display: none;
        }

            .wechat-pop h6 {
                margin-top: 16px;
                width: 100%;
                text-align: center;
                line-height: 24px;
                font-size: 14px;
                color: #000;
            }

            .wechat-pop img {
                display: block;
                width: 100px;
                height: 100px;
                margin: 2px auto 0;
            }
        /*列表*/
        #liebiao {
            width: 100%;
            background: url("lyimages/class-list-repeat.png") repeat;
            padding-bottom: 30px;
        }

        .liebiao-top {
            width: 100%;
            background: url("lyimages/class-list-top.png") repeat-x;
        }

        .liebiao-list {
            width: 75%;
            margin: 0 auto;
        }

            .liebiao-list h3 {
                width: 484px;
                height: 166px;
                background: url("lyimages/class-list-title.png") no-repeat;
                margin: 0 auto;
            }

        .liebiao-list_top {
            width: 96%;
            padding: 10px;
            background-color: #c8c3ce;
            border: 1px solid rgba(255,255,255,.7);
            margin: 0 auto 12px;
            border-radius: 19px;
            box-shadow: 0 1px 5px #999 inset;
        }

        .list-bottom {
            width: 99%;
            padding: 5px;
            border-radius: 9px;
            box-shadow: 0 -1px 5px #999;
            background: linear-gradient( #efedf1, #d9d6dc);
            position: relative;
            margin: 0 auto;
        }

        .top-horn {
            width: 100%;
            height: 17px;
            background: url("lyimages/top-horn.png");
            position: absolute;
            top: 0;
            left: 0;
        }

        .bottom-horn {
            width: 100%;
            height: 28px;
            background: url("lyimages/bottom-horn.png");
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .red {
            background: url("lyimages/corner-flag-red.png");
        }

        .corner-flag {
            width: 114px;
            height: 110px;
            padding-right: 18px;
            position: absolute;
            top: -12px;
            left: 17px;
            z-index: 2;
            font-size: 0;
        }

        em {
            height: 100%;
            width: 0;
            display: inline-block;
            vertical-align: middle;
        }

        .corner-flag p {
            width: 100%;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            font-size: 18px;
            color: #fff;
            line-height: 20px;
        }

        .computer {
            position: absolute;
            width: 97px;
            height: 81px;
            background: url("lyimages/computer.png");
            left: 18px;
            bottom: 14%;
            z-index: 1;
        }

        .list-content {
            width: 82.7%;
            padding: 14px 27px 21px 139px;
            background: linear-gradient( #fafafb 50%, #eeebf0);
            min-height: 86px;
            position: relative;
            border-radius: 5px;
        }

        .content-title {
            background-color: #e1dee4;
            padding-right: 10px;
            margin-right: -10px;
            border-radius: 5px;
            color: #726f75;
        }

        .list-content p {
            padding-left: 18px;
            padding-right: 396px;
            background: url("lyimages/class-disc.png") no-repeat 2px center;
            color: #000;
            height: 34px;
            line-height: 34px;
            border-bottom: 1px dashed #e3e1e6;
            font-size: 16px;
        }

            .list-content p a {
                color: #000000;
            }

        .float-box {
            float: right;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            width: 310px;
            text-align: center;
        }

            .float-box span {
                float: left;
            }

        .time {
            width: 130px;
            font-size: 14px;
        }

        .state {
            width: 100px;
        }

        .duration {
            width: 80px;
            text-align: right;
        }

        .btn {
            float: right;
            width: 74px;
            height: 28px;
            line-height: 28px;
            color: #fff;
            margin-top: 4px;
            cursor: pointer;
            background: url("lyimages/call-btn.png") no-repeat 0 -45px;
        }

        .content-title p {
            background: none;
        }

        /*尾部样式*/
        #weibu {
            height: 144px;
            width: 100%;
            display: flex;
            background: url("/images/footer-bg.jpg") repeat-x left top;
        }

        #weibu_zhong {
            width: 75%;
            height: 80px;
            margin: 30px auto;
            justify-content: space-between;
            display: flex;
        }

        #weibu_left {
            height: 100%;
            width: 25%;
            border-right: 2px solid #b7b3c1;
        }

        #weibu_right {
            height: 100%;
            width: 65%;
        }

        #weibu_right_top {
            height: 50%;
            width: 100%;
        }

        #weibu_right_down {
            height: 50%;
            width: 100%;
        }

        #weibu_right_top ul {
            display: flex;
            justify-content: space-between;
            overflow: hidden;
        }

            #weibu_right_top ul li {
                height: 35px;
                line-height: 35px;
            }

                #weibu_right_top ul li a {
                    color: #666;
                    font-size: 1.1em;
                }

                    #weibu_right_top ul li a:hover {
                        color: #f70;
                    }

                #weibu_right_top ul li.link-line {
                    color: #666;
                    padding: 0 16px;
                }

        #weibu_right_down p {
            font-size: 1.2em;
            color: #6f7b91;
            height: 35px;
            line-height: 35px;
        }
        /*免费索取技术资料*/
        #ziliao {
            width: 100%;
            height: 100%;
            background: url("lyimages/markBg.png") repeat;
            position: fixed;
            z-index: 11;
            top: 0;
            left: 0;
            display: none;
        }

        .pop-contact {
            background: url("lyimages/pop-bg.png");
            padding-top: 142px;
            padding-left: 106px;
            width: 700px;
            height: 332px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -237px;
            margin-left: -403px;
            text-shadow: 4px 6px 4px rgba(101,93,112,.4);
        }

        .pop-contact-close {
            width: 36px;
            height: 36px;
            position: absolute;
            right: 10px;
            top: 62px;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: 0 2px 6px #bca79e;
        }

            .pop-contact-close i {
                display: inline-block;
                width: 100%;
                height: 100%;
                background: url("lyimages/pop-contact-close.png");
                transition: .5s;
            }

                .pop-contact-close i:hover {
                    transform: rotate(360deg);
                }

        .left-box {
            float: left;
            width: 330px;
        }

            .left-box img {
                display: block;
                width: 150px;
                height: 150px;
                margin: 0 auto;
            }

            .left-box p {
                line-height: 24px;
                font-size: 14px;
                margin-bottom: 10px;
            }

                .left-box p span {
                    color: #e75c77;
                }

            .left-box h3 {
                font-weight: normal;
                text-align: center;
            }

        .right-box {
            float: right;
            margin-right: 106px;
            width: 230px;
        }

            .right-box p {
                line-height: 24px;
                font-size: 14px;
                margin-bottom: 20px;
            }

        .clear {
            margin-bottom: 12px;
        }

            .clear li {
                float: left;
            }

            .clear .left {
                width: 306px;
            }

            .clear dt {
                float: left;
                width: 36px;
                height: 36px;
                background: url("lyimages/contact-icon.png") no-repeat;
            }

            .clear dd {
                height: 36px;
                line-height: 36px;
                padding-left: 52px;
            }

        .qq1 {
            margin-bottom: 10px;
        }

            .qq1 dt {
                background-position: 0 0;
            }

        .phone {
            margin-bottom: 10px;
        }

            .phone dt {
                background-position: 0 -36px;
            }

        .wechat1 {
            margin-bottom: 10px;
        }

            .wechat1 dt {
                background-position: -36px 0;
            }
        /*QQ*/
        #QQ {
            width: 100%;
            height: 100%;
            background: url("lyimages/markBg.png") repeat;
            position: fixed;
            z-index: 11;
            top: 0;
            left: 0;
            display: none;
        }

            #QQ .pop-contact {
                background: url("lyimages/pop-bg-2.png");
            }

        .pop-contan {
            margin-bottom: 12px;
            display: table;
        }

            .pop-contan li {
                float: left;
            }

                .pop-contan li.left {
                    width: 306px;
                }

                .pop-contan li dt {
                    float: left;
                    width: 36px;
                    height: 36px;
                    background: url("lyimages/contact-icon.png") no-repeat;
                }

                .pop-contan li dd {
                    height: 36px;
                    line-height: 36px;
                    padding-left: 52px;
                }

                    .pop-contan li dd img {
                        display: block;
                        width: 130px;
                        height: 130px;
                        margin: 0 auto;
                    }

        .qq2 {
            margin-bottom: 36px;
            margin-top: 20px;
        }

        .pop-contan li .qq2 dt {
            background-position: 0 0;
        }

        .phone1 {
            margin-bottom: 40px;
        }

        .pop-contan li .phone1 dt {
            background-position: 0 -36px;
        }

        .wechat2 {
            margin-bottom: 36px;
            margin-top: 20px;
        }

        .pop-contan li .wechat2 dt {
            background-position: -36px 0;
        }

        .pop-contan li .wechat1 .clear {
            text-align: center;
        }

        .kefu {
            margin-right: 130px;
            font-size: 16px;
            padding-top: 18px;
            border-top: 1px dashed #e9e1dd;
        }
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        //页面加载事件
        function Chaxun() {
            $.ajax({
                type: "post",
                url: "jiazai.ashx",
                dataType: "json",
                success: function (result) {
                    //返回成功
                    //遍历JSON数组
                    $.each(result, function (i, item) {
                        var text = item.KeChengName;
                        $(".list-content").children("ul").append("<li><div class='float-box'><span class='time'>2019年11月</span><span class='state' style='color: red'>火热招生中</span><a href='#' class='btn'>咨询我们</a></div><p id='fu'><a href='#'>" + text + "</a></p></li>");
                    });
                }
            });
        }
        //头部的
        function Heard() {
            $(".li").hover(function () {
                $(this).addClass("hover");
                $(this).css({ "color": " #f70" });
                //$(this).parent().siblings().children().removeClass("hover");
            }, function () {
                $(this).removeClass("hover");
                $(this).css({ "color": "#666" });
                //$(this).parent().siblings().children().removeClass("hover");
            }
            );
            $(".li").click(function () {
                $(this).addClass("yangshi");
                $(this).css({ "color": "white" });
                $(this).parent().siblings().children().removeClass("yangshi");
            });
        }
        $(function () {
            //页面加载事件
            Chaxun();
            //头部
            Heard();

            //进入页面时课程选中
            $(".li").eq(1).addClass("yangshi");
            $(".li").eq(1).css({ "color": "white" });
            $(".li").eq(1).parent().siblings().children().removeClass("yangshi");

            //最新开班信息的中间内容的背景颜色切换
            $("dl.kecheng-lie").hover(function () {
                $(this).toggleClass("kecheng-lie-beijing");
            });

            //左边火焰
            $(".main-left").stop().hover(function () {
                $(".main-left-two").animate({
                    "background-size": "10px",
                    "borderWidth": "10"
                }, 100, function () {
                    $(this).animate({
                        "background-size": "184px",
                        "borderWidth": "10"
                    }), 100
                });
            });

            //右边摆手
            $(".main-right").mousemove(function (e) {
                var X = e.pageX;
                var Y = e.pageY;
                if (Y < 480 && 480 - Y < 50) {
                    $(".main-right-one").css({ transition: "none 0s ease 0s", transform: "rotate(" + (474 - Y) + "deg)", });
                }
                if (Y == 480) {
                    $(".main-right-one").css({ transition: "none 0s ease 0s", transform: "rotate(0deg)", });
                }
                if (Y > 480 && Y - 480 < 30) {
                    $(".main-right-one").css({ transition: "none 0s ease 0s", transform: "rotate(" + (474 - Y) + "deg)", });
                }

            });
            $(".main-right").mouseout(function () {
                $(".main-right-one").css({ transition: "none 0s ease 0s", transform: "rotate(0deg)", });
            })
            //微信
            $("li.wechat").hover(function () {
                $(this).children("div").toggle();
            });

            //免费索取技术资料
            $(".material").click(function () {
                //单击免费索取技术资料显示出来
                $("#ziliao").show();
            });
            $(".pop-contact-close i").click(function () {
                //单击X号隐藏
                $("#ziliao").hide();
                $("#QQ").hide();
            });
            //QQ
            $(".qq").click(function () {
                //单击QQ显示出来
                $("#QQ").show();
            });


        });


    </script>
</head>
<body>
    <form id="form1" runat="server">
        <%--  头部--%>
        <div id="heard">
            <div id="heard_conet">
                <div id="conter_left"></div>
                <div id="conter_zhong">
                    <ul>
                        <li><a href="#" class="li">首页</a></li>
                        <li><a href="#" class="li">课程</a></li>
                        <li><a href="#" class="li">视频学习</a></li>
                        <li><a href="#" class="li">尊享视频<i class="nav-new"></i></a></li>
                        <li><a href="#" class="li">社区</a></li>
                    </ul>
                </div>
                <div id="conter_right">
                    <ul>
                        <li><a href="#">登录</a></li>
                        <li>|</li>
                        <li><a href="#">注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <%--最新开班信息--%>
        <div id="kaiban">
            <div id="kaiban_box" style="background-size: 1581px;">
                <div class="light" style="opacity: 1;"></div>
                <div class="ufo" style="top: -72px;"></div>
                <div class="main">
                    <div class="main-left">
                        <span class="main-left-one"></span>
                        <span class="main-left-two"></span>
                    </div>
                    <div class="main-right">
                        <div class="main-right-one">
                            <span class="main-right-one-one"></span>
                            <span class="main-right-one-two"></span>
                        </div>
                        <div class="main-right-two">
                        </div>
                    </div>
                    <div class="main-content">
                        <div class="main-content-box">
                            <div class="main-content-box-bottom">
                                <div class="main-content-box-top">
                                    <div class="kecheng">
                                        <div class="kecheng-box">
                                            <a href="Wedqianduan.aspx" target="_blank">
                                                <dl class="kecheng-lie">
                                                    <dt class="kecheng-lie-pc"></dt>
                                                    <dd>
                                                        <h6>2020 新番：《Web前端工程师实战入门》</h6>
                                                        <p>在线远程班</p>
                                                        <div class="kecheng-lie-state">火热招生中</div>
                                                    </dd>
                                                </dl>
                                            </a>
                                        </div>
                                        <div class="kecheng-box">
                                            <a href="#">
                                                <dl class="kecheng-lie">
                                                    <dt class="kecheng-lie-pc"></dt>
                                                    <dd>
                                                        <h6>2020 新番：《Web前端高级工程师》</h6>
                                                        <p>在线远程班</p>
                                                        <div class="kecheng-lie-state">火热招生中</div>
                                                    </dd>
                                                </dl>
                                            </a>
                                        </div>
                                        <div class="kecheng-box">
                                            <a href="#">
                                                <dl class="kecheng-lie">
                                                    <dt class="kecheng-lie-pc"></dt>
                                                    <dd>
                                                        <h6>2020 新番：《Web全栈架构师课程》</h6>
                                                        <p>在线远程班</p>
                                                        <div class="kecheng-lie-state">火热招生中</div>
                                                    </dd>
                                                </dl>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <%--图标--%>
        <div id="tubiao">
            <ul class="tubiao-box">
                <li class="material">
                    <p>免费索取技术资料</p>
                </li>
                <li class="qq">
                    <p>点击QQ咨询</p>
                    <div class="qq-box">
                        <span class="qq-body"></span>
                        <span class="qq-mark"></span>
                    </div>
                </li>
                <li class="wechat">
                    <p>微信咨询</p>
                    <div class="wechat-pop">
                        <h6>请用微信扫一扫<br />
                            直接联系客服</h6>
                        <img src="lyimages/二维码.jpg" />
                    </div>
                </li>
            </ul>
        </div>
        <%--列表--%>
        <div id="liebiao">
            <div class="liebiao-top">
                <div class="liebiao-list">
                    <h3></h3>
                    <ul>
                        <li class="liebiao-list_top">
                            <div class="list-bottom">
                                <div class="top-horn"></div>
                                <div class="bottom-horn"></div>
                                <div class="corner-flag red">
                                    <em></em>
                                    <p>课程</p>
                                </div>
                                <div class="computer"></div>
                                <div class="list-content">
                                    <div class="content-title">
                                        <div class="float-box">
                                            <span class="time">开班时间</span>
                                            <span class="state">状态</span>
                                            <span class="duration">沟通</span>
                                        </div>
                                        <p>课程名称</p>
                                    </div>
                                    <ul>
                                        <%-- <asp:Repeater ID="Repeater1" runat="server">
                                            <ItemTemplate>
                                                <li>
                                                    <div class="float-box">
                                                        <span class="time">2019年11月</span>
                                                        <span class="state" style="color: red">火热招生中</span>
                                                        <a href="#" class="btn">咨询我们</a>
                                                    </div>
                                                    <p id="fu">
                                                       <a href='#'>" + text + "</a>
                                                    </p>
                                                </li>
                                            </ItemTemplate>
                                        </asp:Repeater>--%>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <%--  尾部内容--%>
        <div id="weibu">
            <div id="weibu_zhong">
                <div id="weibu_left">
                    <img src="../images/weibumiaowei.jpg" />
                </div>
                <div id="weibu_right">
                    <div id="weibu_right_top">
                        <ul>
                            <li><a href="#">首页</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">课程</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">视频学习</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">尊享视频</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">社区</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">关于我们</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">常见问题</a></li>

                        </ul>
                    </div>
                    <div id="weibu_right_down">
                        <p>京ICP备08102442号-1 2007-2019 MIAOV.COM 版权所有</p>
                    </div>
                </div>
            </div>
        </div>
        <%--免费索取技术资料--%>
        <div id="ziliao">
            <div class="pop-contact">
                <div class="pop-contact-close"><i></i></div>
                <div class="left-box">
                    <p>想要免费获取前端技术学习资料，请扫描下方微信公众账号，关注后并发送“<span>学习资料</span>”来获取学习资料哦</p>
                    <img src="lyimages/2code.png" alt="" />
                    <h3>公众号</h3>
                </div>
                <div class="right-box">
                    <p>想要了解咨询更多精彩学习内容，可与我们联系</p>
                    <ul class="clear">
                        <li class="left">
                            <dl class="qq1">
                                <dt></dt>
                                <dd>2852509866</dd>
                            </dl>
                            <dl class="phone">
                                <dt></dt>
                                <dd>010-57269690</dd>
                            </dl>
                            <dl class="wechat1">
                                <dt></dt>
                                <dd>miaov-class</dd>
                            </dl>
                        </li>
                    </ul>
                    <div>
                        <p>客服在线时间：工作日9:30~18:00</p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;周&nbsp;&nbsp;&nbsp;六　&nbsp;10：00~17：00</p>
                    </div>
                </div>
            </div>
        </div>
        <%--QQ--%>
        <div id="QQ">
            <div class="pop-contact">
                <div class="pop-contact-close"><i></i></div>
                <p>咨询在线客服，了解本课程最新消息、及相关课程服务哦</p>
                <ul class="pop-contan">
                    <li class="left">
                        <dl class="qq2">
                            <dt></dt>
                            <dd id="callQQ2" style="cursor: pointer;">点我咨询QQ客服</dd>
                        </dl>
                        <dl class="phone1">
                            <dt></dt>
                            <dd>010-57269690</dd>
                        </dl>
                    </li>
                    <li class="right">
                        <dl class="wechat2">
                            <dt></dt>
                            <dd class="clear">
                                <img src="lyimages/2code.png" alt="" />
                                <span>微信客服</span>
                            </dd>
                        </dl>
                    </li>
                </ul>
                <div class="kefu">客服在线时间：工作日　 9:30~18:00　周六　10：00~17：00</div>
            </div>
        </div>
    </form>
</body>
</html>
